<template>
  <view :class="arrow && 'cell-arrow'" style="padding: 0 12px;">
    <view class="flexbox cell-box" :class="border && 'border-b'" @click="hanle">
      <view class="label" v-if="isLabel">
        <slot name="label">
          <view class="cell-label font-com">
            <text style="color: #ee0a24;" v-if="required">*</text>
            <text>{{label}}</text>
          </view>
        </slot>
      </view>
      <view class="cell-content" :style="{height:cellContentHeight}">
        <slot>
          <view class="flexbox content-val">
            <view class="font-com" :style="{color:getValColor,textAlign:isLabel && 'right'}">
              {{value.length > 0 ? value : placeholder}}
            </view>
            <image class="arrow-icon" v-if="arrow" :src="$getImg('iassCashier/arrow-drop.png')" mode="aspectFill">
            </image>
          </view>
        </slot>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      isLabel: {
        type: Boolean,
        default: true,
      },
      required: {
        type: Boolean,
        default: false,
      },
      label: {
        type: String,
        default: '标题'
      },
      value: {
        type: String,
        default: ''
      },
      placeholder: {
        type: [String, null],
        default: '内容'
      },
      border: {
        type: Boolean,
        default: true,
      },
      arrow: {
        type: Boolean,
        default: true,
      },
      cellContentHeight: {
        type: String,
        default: 'auto'
      },
    },
    components: {
      // Cell
    },
    computed: {
      getValColor() {
        return this.value ? '#333' : '#969799';
      }
    },
    data() {
      return {
        val: ''
      };
    },
    methods: {
      hanle(e) {
        this.$emit('click', e)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .border-b {
    border-bottom: 1rpx solid #ebedf0;
  }

  .flexbox {
    display: flex;
    align-items: center;
  }

  .cell-arrow:active {
    background-color: #f2f3f5;
  }

  .cell-box {
    padding: 10px 0;

    .font-com {
      font-size: 14px;
      line-height: 20px;
      color: #333;
      word-break: break-all;
    }

    .cell-label {
      padding-right: 5px;
      width: 110px;
    }

    .cell-content {
      flex: 1;

      .content-val {
        .font-com {
          flex: 1;
        }
      }

      .arrow-icon {
        display: block;
        width: 20px;
        height: 20px;
        margin-right: -6px;
      }
    }
  }
</style>